<template>
	<GlobalBG title="消息中心">
		<view class="tab-content">
			<view class="tab-item" @click="selectTab('all')" :class="{active: active == 'all'}">全部</view>
			<view class="tab-item" @click="selectTab('sys')" :class="{active: active == 'sys'}">系统通知</view>
			<view class="tab-item" @click="selectTab('event')" :class="{active: active == 'event'}">事件通知</view>
			<view class="tab-item" @click="selectTab('work')" :class="{active: active == 'work'}">工作消息</view>
		</view>
		<view class="message-container">
			<scroll-view scroll-y :refresher-enabled="true" :refresher-triggered="refreshing"
				@refresherrefresh="onRefresh" @scrolltolower="onReachBottom" class="scroll-view">
				<!-- 列表内容 -->
				<view v-for="(item, index) in list" :key="index" class="item">
					<view class="top-info">
						<view class="leftinfo">
							<image class="sysImg" src="/src/static/images/xgjd/message1.png"></image>
							<text class="title-text">系统通知</text>
						</view>
						<text class="time-text">10分钟前</text>
					</view>

					<view class="content-collapse content-tips" v-if="index === currentIndex">
						<text class="text">在视频监控页面，您可以通过组织树或场景筛选来查看不同区域的视频。点击视频卡片可以查看实时画面。</text>
					</view>
					<view class="content-tips" v-else>系统将于今晚22:00进行例行维护</view>
					<view class="line"></view>
					<uni-collapse>
						<uni-collapse-item @click="jumpDetail(index)" title="查看详情" :show-animation="true">
							<!-- <view class="content-collapse">
								<text class="text">在视频监控页面，您可以通过组织树或场景筛选来查看不同区域的视频。点击视频卡片可以查看实时画面。</text>
							</view> -->
						</uni-collapse-item>
					</uni-collapse>
				</view>

				<!-- 加载更多提示 -->
				<view v-if="loading" class="loading-text">加载中...</view>
				<view v-if="noMore" class="no-more-text">没有更多了</view>
				<view class="empty-view" v-if="list.length === 0">
					<image class="img" src="/static/images/xgjd/empty.png"></image>
					<text class="text">查询无结果</text>
				</view>
			</scroll-view>
		</view>

	</GlobalBG>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 数据列表
	// const list = ref(Array.from({
	// 	length: 20
	// }, (_, i) => `项目 ${i + 1}`));
	let list = ref([]);
	// 是否正在刷新
	const refreshing = ref(false);
	// 是否正在加载
	const loading = ref(false);
	// 是否没有更多数据
	const noMore = ref(false);

	// 下拉刷新
	const onRefresh = () => {
		refreshing.value = true;

		// 模拟异步请求
		setTimeout(() => {
			list.value = Array.from({
				length: 20
			}, (_, i) => `刷新项目 ${i + 1}`);
			refreshing.value = false;
			noMore.value = false;
			uni.showToast({
				title: '刷新成功',
				icon: 'success'
			});
		}, 1000);
	};

	// 上拉加载更多
	const onReachBottom = () => {
		if (loading.value || noMore.value) return;

		loading.value = true;

		// 模拟异步请求
		setTimeout(() => {
			const newItems = Array.from({
				length: 10
			}, (_, i) => `新增项目 ${list.value.length + i + 1}`);
			list.value = [...list.value, ...newItems];
			loading.value = false;

			// 模拟没有更多数据的情况
			if (list.value.length >= 50) {
				noMore.value = true;
			}
		}, 1000);
	};

	let active = ref('all')
	const selectTab = (type) => {
		active.value = type
	}
	let currentIndex = ref()
	const jumpDetail = (index) => {
		if(currentIndex.value === index) {
			currentIndex.value = ''
		}else{
			currentIndex.value = index
		}
		
	}
</script>

<style lang="scss">
	.messgae-content {
		width: 100%;
		height: 100%;
		padding: 0 38rpx;

	}

	.uni-collapse-item__title {
		border-bottom: 0 !important;
	}

	.uni-collapse-item__title-box {
		padding-left: 0 !important;
	}

	.uni-collapse-item__wrap {}

	.uni-collapse-item__wrap-content {
		padding-bottom: 28rpx !important;
	}

	.tab-content {
		width: 100%;
		height: 54rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 38rpx 0;

		.tab-item {
			width: 154rpx;
			height: 54rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(70, 102, 149, 0.15);
			border-radius: 25rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 27rpx;
			color: #333333;
			line-height: 54rpx;
			text-align: center;

			&.active {
				color: #FFFFFF;
				background: #2263BF;
			}
		}
	}

	.message-container {
		height: calc(100% - 138rpx);
		display: flex;
		flex-direction: column;
	}

	.scroll-view {
		height: 100%;
		// padding: 0 38rpx;
		// box-sizing: border-box;
	}

	.item {
		margin: 0 38rpx;
		min-height: 246rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 56rpx 0rpx rgba(70, 102, 149, 0.06);
		border-radius: 23rpx;
		margin-bottom: 20rpx;
		padding: 30rpx 28rpx 0rpx 28rpx;

		.uni-collapse-item-border {
			border-bottom: 0 !important;
		}

		.top-info {
			display: flex;
			/* 确保使用 flex 而不是 inline-flex */
			align-items: center;
			justify-content: space-between;

			.leftinfo {
				display: flex;
				/* 确保使用 flex 而不是 inline-flex */
				align-items: center;
			}

			.sysImg {
				width: 53rpx;
				height: 53rpx;
				margin-right: 27rpx;
			}

			.title-text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 31rpx;
				color: #333333;
				line-height: 42rpx;
			}

			.time-text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				color: #999999;
				line-height: 46rpx;
			}
		}

		.content-tips {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 27rpx;
			color: #666666;
			line-height: 46rpx;
			margin-top: 18rpx;
		}

		.line {
			width: 100%;
			height: 2rpx;
			background: #EDEDED;
			margin-top: 21rpx;
		}

		.content-collapse {
			// padding: 20rpx 25rpx;
			// background: rgba(228, 239, 253, 0.6);
			border-radius: 8rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 27rpx;
			color: #666666;
			line-height: 38rpx;

			.text {
				padding-bottom: 20rpx;
			}
		}
	}

	.loading-text,
	.no-more-text {
		text-align: center;
		padding: 10px;
		color: #999;
	}

	.empty-view {
		width: 315rpx;
		height: 242rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		.img {
			width: 315rpx;
			height: 242rpx;
		}

		.text {
			display: block;
			width: 100%;
			left: 0;
			bottom: 20rpx;
			position: absolute;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 27rpx;
			color: #666666;
			line-height: 38rpx;
			text-align: center;
		}
	}
</style>